<template>
    <div class="classify-main">
        <div class="classify-item" v-for="(data,index) in dataList" :key="index" @click="dataHandler(index,data)">
            <div class="classify-name text-display-a-line">
                {{ data.name }}
            </div>
            <div class="calssify-num">
                ({{ data.num }})
            </div>
        </div>
        <div class="comments-head" @click="moreHandler">
            <p>查看更多<i class="el-icon-right"></i></p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    props:['dataList'],
    methods:{
        dataHandler(index,data){
            this.$emit('handler',index,data);
        },
        moreHandler(){
            this.$emit('more');
        }
    }


}
</script>

<style lang="scss" scoped>

.text-display-a-line{
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		-webkit-line-clamp: 1;
		-webkit-box-orient:vrtical;
		/*  overflow : hidden;
		 text-overflow : ellipsis;
		 display :   -webkit-box;
		 -webkit-line-clamp :2; 
		-webkit-box-orient :vertical; */
	}
.classify-main{
    padding-top: 20px;
    width: 100%;
}
.classify-item{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dcdfe6;
}
.classify-item:hover{
    cursor: pointer;
}
.classify-name{
    width: 80%;
    margin: auto 0;
}
.calssify-num{
    width: 20%;
    text-align: center;
    margin: auto 0; 
    color: #999;

}
.comments-head{
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #FF6900;
    text-transform: uppercase;
    letter-spacing: 4px;
    animation: fadeInLeft 1s;
    cursor: pointer;
}

</style>